<template>
	<div class="room-detail-container" v-loading="loading">
		<!-- 头部 -->
		<el-card class="mb-6">
			<div class="header-content">
				<h3 class="room-title">{{ roomData.roomName }}</h3>
				<div class="action-buttons">
					<el-button type="primary" :icon="Edit" @click="handleEdit">
						编辑包间
					</el-button>
					<el-button :icon="Switch" @click="handleDisable">
						{{ roomData.isAvailable ? '停用包间' : '启用包间' }}
					</el-button>
				</div>
			</div>

			<el-card shadow="never" class="mt-4">
				<div class="capacity-info">
					<div class="info-item">
						<span class="info-label">容纳人数</span>
						<span class="info-value">{{ roomData.seatingCapacity }}人</span>
					</div>
					<div class="info-item">
						<span class="info-label">包间类型</span>
						<span class="info-value">
							{{ roomTypeText }}
						</span>
					</div>
				</div>
			</el-card>
		</el-card>

		<!-- Main Content -->
		<div class="main-content">
			<!-- Left Content (8 columns) -->
			<div class="left-content">
				<!-- 图片区 -->
				<el-card>
					<div class="main-image">
						<el-image v-if="mainImageUrl" :src="mainImageUrl" fit="cover" class="image-preview" />
						<el-empty v-else description="暂无包间图片" :image-size="100" />
					</div>
					<div class="thumbnail-list">
						<el-image v-for="(image, index) in roomData.roomImages" :key="index" :src="image.imageUrl"
							fit="cover" class="thumbnail" @click="changeMainImage(index)" />
					</div>
				</el-card>

				<!-- 包间信息 -->
				<el-card class="mt-6">
					<template #header>
						<div class="card-header">
							<span>包间信息</span>
						</div>
					</template>

					<div class="room-info">
						<div class="info-row">
							<div class="info-col">
								<span class="info-label">包间 ID</span>
								<span class="info-value">{{ roomData.id }}</span>
							</div>
							<div class="info-col">
								<span class="info-label">包间费用</span>
								<span class="info-value price">¥{{ formattedFee }}</span>
							</div>
						</div>

						<div class="info-row">
							<div class="info-col">
								<span class="info-label">包间描述</span>
								<p class="info-description">{{ roomData.description }}</p>
							</div>
						</div>

						<div class="info-row" v-if="roomData.unavailableDates && roomData.unavailableDates.length > 0">
							<div class="info-col">
								<span class="info-label">不可用日期</span>
								<div class="unavailable-dates">
									<el-tag v-for="date in roomData.unavailableDates" :key="date.id" type="info"
										class="date-tag">
										{{ date.unavailableDate }}
									</el-tag>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</div>

			<!-- 系统信息 -->
			<div class="right-sidebar">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>系统信息</span>
						</div>
					</template>

					<div class="system-info">
						<div class="info-item">
							<span class="info-label">创建时间</span>
							<span class="info-value">{{ roomData.createdAt }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">更新时间</span>
							<span class="info-value">{{ roomData.updatedAt }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">状态</span>
							<el-tag :type="statusTagType" size="small">
								{{ statusText }}
							</el-tag>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'RoomDetailView'
	};
</script>

<script setup>
	import {
		getRoomDetail
	} from '@/api/room.js'
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		Edit,
		Switch
	} from '@element-plus/icons-vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	const route = useRoute()
	const router = useRouter()
	const loading = ref(false)
	const roomId = ref(route.params.id)
	const roomData = ref({})
	const mainImageUrl = ref('')

	/**
	 * 计算格式化后的费用
	 */
	const formattedFee = computed(() => {
		return roomData.value.fee ? roomData.value.fee.toFixed(2) : '0.00'
	})

	/**
	 * 包间类型文本
	 */
	const roomTypeText = computed(() => {
		const types = {
			1: '普通包间',
			2: 'VIP包间',
			3: '豪华包间'
		}
		return types[roomData.value.roomType] || '未知类型'
	})

	/**
	 * 状态标签类型
	 */
	const statusTagType = computed(() => {
		if (!roomData.value.isAvailable) return 'danger' // 包间被停用

		const status = roomData.value.status
		const statusTypes = {
			0: 'success', // 空
			1: 'warning', // 已预约
			2: 'info' // 取消预约
		}
		return statusTypes[status] || 'info'
	})
	/**
	 * 状态标签文本
	 */
	const statusText = computed(() => {
		if (!roomData.value.isAvailable) return '已停用' // 包间被停用

		const status = roomData.value.status
		const statusTexts = {
			0: '空闲可预约',
			1: '已预约',
			2: '已取消预约'
		}
		return statusTexts[status] || '未知状态'
	})

	/**
	 * 获取包间详情
	 */
	const fetchRoomData = async () => {
		loading.value = true
		try {
			const res = await getRoomDetail(roomId.value)
			if (res.data) {
				roomData.value = res.data

				// 设置主图 - 优先使用单独的image字段，没有则使用roomImages中的第一张
				if (res.data.image) {
					mainImageUrl.value = res.data.image
				} else if (res.data.roomImages?.length > 0) {
					mainImageUrl.value = res.data.roomImages[0].imageUrl
				} else {
					mainImageUrl.value = new URL('../../assets/noImage.png', import.meta.url).href
				}
			}
		} catch (error) {
			ElMessage.error('获取包间详情失败')
		} finally {
			loading.value = false
		}
	}

	// 获取包间数据
	onMounted(() => {
		fetchRoomData()
	})

	// 切换主图
	const changeMainImage = (index) => {
		if (roomData.value.roomImages && roomData.value.roomImages[index]) {
			mainImageUrl.value = roomData.value.roomImages[index].imageUrl
		}
	}

	// 处理编辑
	const handleEdit = () => {
		router.push(`/room/edit/${roomId.value}`)
	}

	// 处理停用/启用
	const handleDisable = () => {
		const action = roomData.value.isAvailable ? '停用' : '启用'
		ElMessageBox.confirm(
			`确定要${action}该包间吗？`,
			`${action}包间`, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			// 这里调用API更新状态
			ElMessage.success(`${action}操作成功`)
			// 重新获取数据
			fetchRoomData()
		}).catch(() => {
			ElMessage.info('已取消操作')
		})
	}
</script>

<style scoped>
	.room-detail-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
		overflow-y: auto;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.room-title {
		font-size: 20px;
		font-weight: 600;
		color: #303133;
		margin: 0;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.capacity-info {
		display: flex;
		gap: 24px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
	}

	.info-label {
		font-size: 14px;
		color: #909399;
	}

	.info-value {
		font-size: 24px;
		font-weight: 600;
		color: #303133;
	}

	.price {
		color: #409eff;
	}

	.main-content {
		flex: 1;
		display: flex;
		gap: 20px;
		min-height: 0;
	}

	.left-content {
		flex: 2;
		min-width: 0;
	}

	.right-sidebar {
		flex: 1;
		position: relative;
		max-height: calc(100vh - 200px);
	}

	.main-image {
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f7fa;
		border-radius: 4px;
		overflow: hidden;
	}

	.image-preview {
		width: 100%;
		height: 100%;
	}

	.thumbnail-list {
		display: flex;
		gap: 8px;
		padding: 12px 0;
		flex-wrap: wrap;
	}

	.thumbnail {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		cursor: pointer;
		border: 1px solid #ebeef5;
		transition: all 0.3s;
	}

	.thumbnail:hover {
		border-color: #409eff;
		transform: translateY(-2px);
	}

	.card-header {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}

	.room-info {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.info-row {
		display: flex;
		gap: 16px;
	}

	.info-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.info-description {
		margin: 0;
		font-size: 14px;
		color: #606266;
		line-height: 1.6;
	}

	.system-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.unavailable-dates {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 8px;
	}

	.date-tag {
		margin-right: 8px;
		margin-bottom: 8px;
	}

	.mt-6 {
		margin-top: 24px;
	}

	.mb-6 {
		margin-bottom: 24px;
	}
</style>